<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title></title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#666;}
			/*main start*/
			.main{width:1000px;height:540px;margin:40px auto;position:relative;border:2px solid #000;}
			.main .menu{width:118px;height:540px;position:absolute;top:0;left:0;background:#6666ff;border-right:2px solid #000;}
			.main ul li{width:100px;height:28px;border:1px solid #000;border-radius:5px;float:left;line-height:28px;text-align:center;margin:5px 0 0 5px;list-style:none;}
			.main ul li a{text-decoration:none;color:#fff;}
			.main ul .set{background:#000033;}
			.main .show{width:880px;height:540px;display:none;position:absolute;top:0;right:0;background:url("images/sww.png") no-repeat;}
			.main .show .tittle{border-bottom:2px solid #000;display:block;height:38px;}
			.main .show .tittle h1{line-height:38px;text-align:center;color:#fff;}
			.main .show .page {width:880px;height:500px;}
			.main .show .page .iframe{width:880px;height:500px;border:0;}
			.clean{clear:both;}
			/*end main*/
		</style>
	</head>
<body>
	<div class="main">
		<div class="menu">
			<ul id="qh">
				<li>
					<a href="#"><div>自制右键菜单</div></a>
				</li>
				<li>
					<a href="#"><div>优酷选项卡</div></a>
				</li>
				<li>
					<a href="#"><div>banner选项卡</div></a>
				</li>
				<li>
					<a href="#"><div>百度透明技术</div></a>
				</li>
				<li>
					<a href="#"><div>折叠选项卡</div></a>
				</li>
				<li>
					<a href="#"><div>微博分享</div></a>
				</li>
				<li>
					<a href="#"><div>动画元素</div></a>
				</li>
				<li>
					<a href="#"><div>双导航</div></a>
				</li>
				<li>
					<a href="#"><div>滑动导航</div></a>
				</li>
				<li>
					<a href="#"><div>我的博客</div></a>
				</li>
				<li>
					<a href="#"><div>时光轴</div></a>
				</li>
				<li>
					<a href="#"><div>九九乘法表</div></a>
				</li>
			</ul>
		</div>
		<div class="clean"></div>
		<div class="show" style="display:block">
			<div class="tittle">
				<h1>自制右键菜单</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/youjianhua.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>优酷选项卡</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/youku.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>banner选项卡</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/banner.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>百度透明技术</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/baidu.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>折叠选项卡</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/zhedie.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>微博分享</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/share.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>SG类库制作动画元素</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/donghua.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>用dldtdd标签实现双导航</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/dldtdd.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>利用可变的绝对定位实现滑动导航</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/nav.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>我的博客</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/blog.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>java开发QQ空间时光轴</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/timeline.html"></iframe></div>
		</div>
		<div class="show">
			<div class="tittle">
				<h1>九九乘法表</h1>
			</div>
			<div class="page"><iframe class="iframe" src="xmszhtml/jjcfb.html"></iframe></div>
		</div>
	</div>
	<!--end youku-->
<!--导入jquery的官方类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$(".main").find("li").hover(function(){
			//当鼠标滑动到li上的时候，添加样式，再滑动到相邻元素时，把前一个去掉（互斥）
			$(this).addClass("set").siblings().removeClass("set");
		});
	});
	
	$("#qh").click(function(){
		$(".main").find("li").click(function(){;
		//获取当前滑动的li的索引（下标）
		var _index = $(this).index();
		//当鼠标滑动到li标签上的时候，先隐藏所有div，再根据对应的下标显示出相应下标的div
		$(".show").hide().eq(_index).show();
		});
	});

</script>

</body>
</html>